<template>
  <el-aside :width="$store.state.isCollapse ? '200px' : '70px'">
    <!-- :width="$store.state.isCollapse ? '200px' : '70px'" -->
    <div class="l_title" v-show="$store.state.isCollapse"><img src="../../../assets/img/logo.png" alt="" /></div>
    <div class="l_title" v-show="!$store.state.isCollapse">后台</div>
    <el-row class="tac">
      <el-col :span="12">
        <el-menu
          @click="fenYeChange(val)"
          :default-active="$store.state.active"
          class="el-menu-vertical-demo"
          router
          :unique-opened="true"
          :collapse="!$store.state.isCollapse"
          :collapse-transition="false"
          :style="{ width: $store.state.isCollapse ? '200px' : '70px' }"
        >
          <el-menu-item index="/home/index" class="first_menu" @click="clickMenu('首页')">
            <img src="../../../assets/img/组 03@2x.png" alt="" />
            <span>首页</span>
          </el-menu-item>
          <!-- 第一个 -->
          <el-sub-menu index="/home/diancai" @click="Menu('点菜管理系统')">
            <template #title>
              <img src="../../../assets/img/组 01@2x.png" alt="" />
              <span>点菜管理系统</span>
            </template>
            <el-menu-item index="/home/diancai/dianping" @click="clickMenu({ name: '大众点评', path: '/home/diancai/dianping' })">大众点评</el-menu-item>
            <el-menu-item index="/home/diancai/tangshi" @click="clickMenu({ name: '堂食', path: '/home/diancai/tangshi' })">堂食</el-menu-item>
            <el-menu-item index="/home/diancai/waimai" @click="clickMenu({ name: '外卖', path: '/home/diancai/waimai' })">外卖</el-menu-item>
          </el-sub-menu>
          <!-- 第2个 -->
          <el-sub-menu index="/home/xiaoshou" @click="Menu('销售管理系统')">
            <template #title>
              <img src="../../../assets/img/组 02@2x.png" alt="" />
              <span>销售管理系统</span>
            </template>
            <el-menu-item index="/home/xiaoshou/luru" @click="clickMenu({ name: '商品录入', path: '/home/xiaoshou/luru' })">商品录入</el-menu-item>
            <el-menu-item index="/home/xiaoshou/shouyin" @click="clickMenu({ name: '日常收银管理系统', path: '/home/xiaoshou/shouyin' })">日常收银管理系统</el-menu-item>
          </el-sub-menu>
          <!-- 第3个 -->
          <el-sub-menu index="/home/shuju" @click="Menu('数据分析系统')">
            <template #title>
              <img src="../../../assets/img/组 03@2x.png" alt="" />
              <span>数据分析系统</span>
            </template>
            <el-menu-item index="/home/shuju/zhuangkuang" @click="clickMenu({ name: '实时经营概况', path: '/home/shuju/zhuangkuang' })">实时经营概况</el-menu-item>
            <el-menu-item index="/home/shuju/num" @click="clickMenu({ name: '销售量', path: '/home/shuju/num' })">销售量</el-menu-item>
            <el-menu-item index="/home/shuju/fangshi" @click="clickMenu({ name: '消费方式', path: '/home/shuju/fangshi' })">消费方式</el-menu-item>
          </el-sub-menu>
          <!-- 第4个 -->
          <el-sub-menu index="/home/renyuan" @click="Menu('人员管理系统')">
            <template #title>
              <img src="../../../assets/img/组 04@2x.png" alt="" />
              <span>人员管理系统</span>
            </template>
            <el-menu-item index="/home/renyuan/yuangong" @click="clickMenu({ name: '新增会员', path: '/home/renyuan/yuangong' })">新增会员</el-menu-item>
            <el-menu-item index="/home/renyuan/huiyuan" @click="clickMenu({ name: '外卖', path: '/home/renyuan/huiyuan' })">查看会员</el-menu-item>
          </el-sub-menu>
          <!-- 第5个 -->
          <el-sub-menu index="/home/houqin" @click="Menu('后勤管理系统')">
            <template #title>
              <img src="../../../assets/img/组 05@2x.png" alt="" />
              <span>后勤管理系统</span>
            </template>
            <el-menu-item index="/home/houqin/kucun" @click="clickMenu({ name: '库存盘点', path: '/home/houqin/kucun' })">库存盘点</el-menu-item>
            <el-menu-item index="/home/houqin/kuguan" @click="clickMenu({ name: '库管库存', path: '/home/houqin/kuguan' })">库管库存</el-menu-item>
          </el-sub-menu>
          <!-- 第6个 rong账号权限高 -->
          <el-sub-menu index="/home/rong" v-if="$store.state.quanxian" @click="Menu('rong权限管理')">
            <template #title>
              <img src="../../../assets/img/组 05@2x.png" alt="" />
              <span>rong权限管理</span>
            </template>
            <el-menu-item index="/home/rong/info" @click="clickMenu({ name: '账号信息', path: '/home/rong/info' })">账号信息</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-col>
    </el-row>
  </el-aside>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'

const route = useRoute()
const store = useStore()
//设置页面刷新, 还定在某个位置
const fenYeChange = (val) => {
  // console.log(route.path)
  // console.log(val)
  sessionStorage.setItem('path', route.path)
}

//面包屑
//定义子菜单
const clickMenu = (item) => {
  // console.log(item)
  store.commit('selectMenu', item)

  //点击子菜单的时候,显示
  if (item == '首页') {
    store.state.showClick = false
  } else {
    store.state.ziCaiDanShow = true
    store.state.showClick = true
  }
}
//定义主菜单
const Menu = (item) => {
  // console.log(item)
  store.commit('Menu', item)
  store.state.showClick = true
  store.state.ziCaiDanShow = false
}
</script>

<style lang="less" scoped>
.el-aside {
  height: 100%;
  // height: 100vh;
  background-color: #c2f35f9c;
  // background-image: linear-gradient(-20deg, #616161 0%, #9bc5c3 100%);

  .l_title {
    height: 56px;
    background-color: #c2f35f9c;
    // background-color: #ffd0003a;
    // background-image: linear-gradient(-20deg, #616161 0%, #9bc5c3 100%);
    text-align: center;
    line-height: 56px;
    font-size: 20px;
    img {
      width: 104px;
      height: 50px;
      margin-top: 10px;
      margin-left: -6px;
    }
  }
  .el-row {
    height: calc(100% - 56px);
    width: 100%;
    .el-menu {
      // height: calc(100% - 56px);
      height: 100%;
      // background-color: #ffd0003a;
      background-color: #c2f35f9c;

      // background-image: linear-gradient(-20deg, #616161 0%, #9bc5c3 100%);
      // background-color:#FFD200;
      width: 100%;
      .el-menu-item {
        width: 100%;
      }
    }
    .el-col-12 {
      max-width: 100%;
    }
  }
}
:deep(.el-header) {
  background: #fff !important;
}
.el-header {
  background: #fff !important;
}

.first_menu {
  img {
    margin-right: 30px;
    width: 32px;
    height: 32px;
  }
  span {
    // font-weight: 700;
    font-family: '楷体';
    font-size: 16px;
  }
}
</style>
